import { chargeBalance, queryBalance } from '@/api/user';
import { useCommonStore, useUserStore } from '@/store'
import { View, Image, Text, Label } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react';
import { AtAvatar, AtButton, AtFloatLayout, AtIcon, AtInput, AtList, AtListItem, AtMessage } from 'taro-ui'

export default function Personal() {
  const userStore = useUserStore();
  const commonStore = useCommonStore();

  const [aboutUs, setAboutUs] = useState<boolean>(false);

  const handleLogin = () => Taro.navigateTo({ url: `/pages/user/index` })

  const handleShowUserInfo = () => Taro.navigateTo({ url: "/pages/show-userinfo/index" })

  const jumpToOrder = () => {
    Taro.switchTab({ url: "/pages/order/index" })
    commonStore.setSelectedIndex(2);
  }

  const [showCharge, setShowCharge] = useState<boolean>(false);
  const [chargeVal, setChargeVal] = useState<number>(0);

  const fetchBalance = async () => {
    const { data } = await queryBalance();
    userStore.setBalance(data);
  }

  const handleChangeChargeVal = (val: number) => setChargeVal(val);
  const charge = async () => {
    const data = await chargeBalance(chargeVal);
    if (data.code === 200) {
      fetchBalance();
      Taro.atMessage({
        type: "success",
        message: data.data,
        duration: 1000
      })
      setShowCharge(false);
    } else {
      Taro.atMessage({
        type: "error",
        message: "请稍后重试",
        duration: 1000
      })
    }
  }

  return (
    <View className='personal h-screen bg-gray-100'>

      <View className='w-full h-1/5 bg-gradient-to-r from-blue-300 to-purple-400 flex items-center px-4 gap-x-3 relative'>
        <View onClick={handleShowUserInfo}>
          <AtAvatar circle image={userStore.avatar} />
        </View>
        <View className='text-xs text-white' onTap={handleLogin}>
          {!userStore.username ?
            <>
              请点击登陆
              <AtIcon value='chevron-right' size='14' color='#fff' />
            </>
            :
            <>
              {userStore.username}
            </>
          }
        </View>
        <View className='absolute left-4 bottom-3 flex gap-x-3 items-end'>
          {
            userStore.username && (
              <>
                <View className='font-semibold text-xs text-[#6910E8] bg-gray-100 rounded-md px-1'>当前余额</View>
                <View className='text-[#6910E8]'>{`${userStore.balance} 元`}</View>
                <View className='flex gap-x-1 items-center text-xs' onClick={() => setShowCharge(true)}>
                  <AtIcon value='credit-card' className='text-yellow-300' size={15} />
                  <Text className='text-[#6910E8]'>充值</Text>
                </View>
              </>
            )
          }
        </View>
      </View>

      <View className='mt-3'>

        <AtList>
          <AtListItem
            title='购物车'
            arrow='right'
            thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
            onClick={jumpToOrder}
          />
          <AtListItem
            title='联系客服'
            arrow='right'
            extraText='10086'
            thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
            onClick={() => Taro.makePhoneCall({ phoneNumber: '10086' })}
          />
          <AtListItem
            title='关于我们'
            arrow='right'
            thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
            onClick={() => setAboutUs(true)}
          />
        </AtList>

        {
          userStore.token ?
            <AtButton className='mt-3 bg-red-400 text-white font-bold' onClick={() => {
              userStore.logout();
              commonStore.setSelectedIndex(0);
            }}>退出登陆</AtButton>
            :
            <></>
        }
      </View>

      <AtFloatLayout isOpened={aboutUs} title='关于我们' onClose={() => setAboutUs(false)} className='overflow-y-auto'>
        <View className='text-sm font-semibold'>
          我们是一支专业的家政团队，公司内有严格的员工制度，为每一位客户服务是我们的荣幸
        </View>
        <View className='flex flex-col items-center'>
          <Image src='https://img0.baidu.com/it/u=2555468105,2229295420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=986' />
        </View>
      </AtFloatLayout>

      <AtFloatLayout isOpened={showCharge} title='充值' onClose={() => {
        setShowCharge(false);
        setChargeVal(0);
      }}>
        <Label className='flex items-center'>
          <Text className='text-xs'>充值金额</Text>
          <AtInput placeholder='请输入充值金额' type='number' name='chargeVal' value={`${chargeVal}`} onChange={handleChangeChargeVal} />
        </Label>
        <AtButton type='primary' size='normal' onClick={charge}>充值</AtButton>
      </AtFloatLayout>

      <AtMessage />
    </View>
  )
}
